<template>
    <div class="help-container">
        <div class="header animate__animated animate__fadeInDown">
            <img src="/ziluw.png" width="77px" alt="logo" class="logo">
            <div class="title">
                <h1>智慧大模型助教系统使用帮助</h1>
                <p>通过以下视频教程，快速了解系统功能及使用方法</p>
            </div>
            <div class="back-btn">
                <el-button type="primary" @click="goBack" icon="el-icon-back">返回登录页</el-button>
            </div>
        </div>

        <!-- 导航页面 - 当没有选择视频时显示 -->
        <div v-if="!currentVideo" style="padding-top: 10vh;" class="video-nav animate__animated animate__fadeIn">
            <div class="nav-title">
                <h2>功能导航</h2>
                <p>点击下方卡片查看功能详细演示视频</p>
            </div>

            <div class="nav-cards">
                <div v-for="(video, index) in videoList" :key="index"
                    class="nav-card animate__animated animate__fadeInUp"
                    :style="{ 'animation-delay': index * 0.2 + 's' }" @click="showVideo(index)">
                    <div class="card-content">
                        <div class="card-icon">
                            <i :class="video.icon"></i>
                        </div>
                        <h3>{{ video.title }}</h3>
                        <p>{{ video.description }}</p>
                        <el-button type="primary" size="small" plain round>观看演示</el-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 视频详情页面 - 当选择视频后显示 -->
        <div v-else class="video-detail animate__animated animate__fadeIn">
            <div class="video-header">
                <el-button type="text" icon="el-icon-back" @click="closeVideo">返回导航</el-button>
                <h2>{{ currentVideo.title }}</h2>
            </div>

            <div class="video-player-container">
                <video ref="videoPlayer" class="full-video-player" :src="currentVideo.src" controls
                    @ended="videoEnded"></video>
            </div>

            <div class="video-info">
                <h3>{{ currentVideo.title }}</h3>
                <p class="video-description">{{ currentVideo.fullDescription || currentVideo.description }}</p>
            </div>
        </div>

        <div class="footer animate__animated animate__fadeIn" style="animation-delay: 0.6s;">
            <p>如需更多帮助，请联系系统管理员或查看 <a @click="downloadManual" class="manual-link">完整使用手册</a></p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HelpPage',
    data() {
        return {
            currentVideo: null,
            videoList: [
                {
                    title: '知识点抽取功能演示',
                    description: '基于课程大纲和课程教材的知识点自动抽取',
                    fullDescription: '本视频详细演示了如何使用系统自动从课程大纲和教材中抽取关键知识点，帮助教师快速构建课程知识体系，提高备课效率。',
                    src: 'http://111.63.183.17:8217/upload/file/2025/05/14/1922497346529153025.mp4',
                    icon: 'el-icon-reading'
                },
                {
                    title: '数字人视频生成功能演示',
                    description: '基于知识点的讲稿自动生成和数字人授课',
                    fullDescription: '本视频演示了如何使用系统根据知识点自动生成教学讲稿，并利用数字人技术生成生动的授课视频，为学生提供个性化的学习体验。',
                    src: 'http://111.63.183.17:8217/upload/file/2025/05/14/1922497525500104705.mp4',
                    icon: 'el-icon-video-camera'
                },
                {
                    title: '出题组卷功能演示',
                    description: '基于知识点的自动出题组卷',
                    fullDescription: '本视频详细讲解了如何使用系统根据知识点体系自动生成试题和试卷，满足不同难度和类型的教学评估需求，提高教学评价效率。',
                    src: 'http://111.63.183.17:8217/upload/file/2025/05/14/1922553255552897026.mp4',
                    icon: 'el-icon-document'
                }
            ]
        }
    },
    methods: {
        goBack() {
            this.$router.push('/login');
        },

        showVideo(index) {
            this.currentVideo = this.videoList[index];
            // 等DOM更新后获取视频元素并播放
            this.$nextTick(() => {
                if (this.$refs.videoPlayer) {
                    this.$refs.videoPlayer.play();
                }
            });
        },

        closeVideo() {
            // 暂停视频
            if (this.$refs.videoPlayer) {
                this.$refs.videoPlayer.pause();
            }
            // 回到导航页
            this.currentVideo = null;
        },

        videoEnded() {
            this.$message({
                message: '视频播放完成',
                type: 'success'
            });
        },

        downloadManual() {
            const link = document.createElement('a');
            link.href = '/使用手册.pdf';
            link.download = '使用手册.pdf';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.$message({
                message: '使用手册下载中...',
                type: 'success'
            });
        }
    }
}
</script>

<style scoped lang="scss">
.help-container {
    width: 100%;
    min-height: 100vh;
    background-image: linear-gradient(to bottom, #1c2237, #2d3a5a);
    color: #fff;
    padding-bottom: 30px;

    .header {
        display: flex;
        align-items: center;
        padding: 30px 50px;
        background-color: rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

        .logo {
            margin-right: 20px;
        }

        .title {
            flex: 1;

            h1 {
                margin: 0;
                font-size: 28px;
                font-weight: bold;
            }

            p {
                margin-top: 5px;
                font-size: 16px;
                color: #ccc;
            }
        }

        .back-btn {
            margin-left: 20px;
        }
    }

    // 导航页面样式
    .video-nav {
        padding: 20px 50px 40px;

        .nav-title {
            text-align: center;
            margin-bottom: 40px;

            h2 {
                font-size: 32px;
                margin: 0;
                font-weight: bold;
            }

            p {
                margin-top: 10px;
                font-size: 16px;
                color: #ccc;
            }
        }

        .nav-cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
        }

        .nav-card {
            flex-basis: 300px;
            height: 280px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
                transform: translateY(-10px);
                background-color: rgba(255, 255, 255, 0.15);
                box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            }

            .card-content {
                height: 100%;
                padding: 30px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                text-align: center;

                .card-icon {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    background-color: rgba(90, 140, 255, 0.2);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;

                    i {
                        font-size: 40px;
                        color: #5a8cff;
                    }
                }

                h3 {
                    font-size: 20px;
                    margin: 0 0 10px;
                    color: #fff;
                }

                p {
                    flex-grow: 1;
                    color: #ccc;
                    font-size: 14px;
                    margin-bottom: 20px;
                }
            }
        }
    }

    // 视频详情页样式
    .video-detail {
        padding: 20px 50px 40px;
        max-width: 1200px;
        margin: 0 auto;

        .video-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;

            h2 {
                margin: 0 0 0 20px;
                font-size: 24px;
            }
        }

        .video-player-container {
            width: 100%;
            background-color: #000;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }

        .full-video-player {
            width: 100%;
            display: block;
        }

        .video-info {
            margin-top: 30px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 20px 30px;

            h3 {
                font-size: 22px;
                margin: 0 0 15px;
                color: #5a8cff;
            }

            .video-description {
                font-size: 16px;
                line-height: 1.6;
                color: #eee;
            }
        }
    }

    .footer {
        text-align: center;
        margin-top: 40px;
        padding: 20px;
        color: #ccc;

        .manual-link {
            color: #5a8cff;
            text-decoration: underline;
            cursor: pointer;

            &:hover {
                color: #1e5ae7;
            }
        }
    }
}

// 响应式设计
@media (max-width: 1024px) {
    .help-container {
        .header {
            padding: 20px 30px;
        }

        .video-nav,
        .video-detail {
            padding: 20px 30px;
        }
    }
}

@media (max-width: 768px) {
    .help-container {
        .header {
            flex-direction: column;
            text-align: center;
            padding: 20px;

            .logo {
                margin-right: 0;
                margin-bottom: 15px;
            }

            .title {
                margin-bottom: 15px;
            }
        }

        .video-nav {
            padding: 20px 15px;

            .nav-title {
                h2 {
                    font-size: 24px;
                }
            }

            .nav-cards {
                gap: 20px;
            }

            .nav-card {
                flex-basis: 100%;
                height: auto;

                .card-content {
                    padding: 20px;
                }
            }
        }

        .video-detail {
            padding: 10px 15px;

            .video-info {
                padding: 15px;
            }
        }
    }
}
</style>